<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>update-datafile</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>

<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>

<body>
    <h3 id="problem_id">{{ .problem_id }}</h3>
    <form action="" class="layui-form" method="post">
        {{ range $file := .files}}
        <div class="layui-input-block">
            <input type="checkbox" name="file" title="{{ $file }}" value="{{ $file }}">
        </div>
        {{ end }}
        <button class="layui-btn layui-btn-danger" name="delete" onclick="remove()" type="button">删除所选文件</button>
        <button class="layui-btn" type="button" name="download" onclick="download_file()">下载所选文件</button>
    </form>
    <button name="upload" class="layui-btn" id="upload" type="button">上传文件</button>
    <script>
        layui.use('upload', function () {
            var upload = layui.upload; //得到 upload 对象
            upload.render({
                elem: '#upload'
                , url: '/file_modify?problem_id=' + document.getElementById("problem_id").innerText
                , multiple: true
                , accept: 'file'
                , data: {
                    'upload' : 1,
                }
                , allDone: function (obj) { //当文件全部被提交后，才触发
                    console.log(obj.total); //得到总文件数
                    console.log(obj.successful); //请求成功的文件数
                    console.log(obj.aborted); //请求失败的文件数
                    alert('上传成功');
                    location.reload();
                }
                , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

                }, error: function () {
                    //请求异常回调
                }
            });
        });
        function download_file() {
            var files = document.getElementsByName("file");
                for (i = 0;i < files.length; i++) {
                    filename = files[i].value;
                    if (files[i].checked) {
                        var url = '/file_modify?download=1&problem_id=' + document.getElementById("problem_id").innerText + '&file=' + encodeURIComponent(files[i].value);
                        console.log(url);
                        // location.href = url;
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.setAttribute('target', '_blank');
                        /*
                        * download的属性是HTML5新增的属性
                        * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
                        * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
                        * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
                        */
                        filename && a.setAttribute('download', filename);
                        a.href = url;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);

                    }
                }
        }
        function remove() {
            var files = document.getElementsByName("file");
            filenames = new Array();
            for (i = 0;i < files.length;i++) {
                if (files[i].checked) {
                    filenames.push(files[i].value);
                }
            }
            console.log(filenames)
            layui.use(['jquery'], function(){
                var $ = layui.$;
                $.ajax({
                    url:"/file_modify?problem_id=" + document.getElementById("problem_id").innerText,
                    data:{
                        'delete' : 1,
                        'file' : filenames,
                    },
                    dataType:"json",
                    traditional:true,
                    type:"post",
                    success:function(data,status){alert(data.msg);location.reload();},
                    error:function(data){alert(JSON.stringify(data));location.reload();}
                });
            });
        }
    </script>
</body>

</html>